<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位的特殊应用_1</title>
</head>
<style>
    .container {
        width: 100%;
        height: 500px;
        background-color: gray;
        position: relative;
    }

    .box_1 {
        background-color: bisque;
        padding: 20px;
        border: black 10px solid;
        /*如果使用width来设置box_1的宽度，会超出父亲盒子的范围，
        因为儿子box_1盒子使用了padding和border*/
        /*width: 100%;*/
        /*使用离左边和右边的的定位来实现不超出，上下也是同样操作*/
        position: absolute;
        left: 0;
        right: 0;
    }
</style>
<body>
<div class="container">
    <div class="box_1">解决儿子盒子使用了padding和border时，盒子超出父亲盒子的方法！</div>
</div>
</body>
</html>